//@name: support.less Driver Manual Firmware
//@description: 服务支持列表页样式
//@author: Alan(alan_webdeveloper@163.com)
//@update: 2020-10-28 10:42

@import "../public/mixins";
@import "../public/variables";

//驱动
.tips {
  padding: 20px 10px;
  margin-bottom: 5px;
  background: @whiteColor;

  p {
    margin-bottom: 10px;
  }

  b {
    font-weight: bold;
  }

  a:hover {
    color: #25a4bb + 50;
  }
}

.filter-box {
  margin-bottom: 5px;
  padding: 20px 10px;
  background: @whiteColor;

  .type {
    position: relative;
    margin-bottom: 20px;

    h3 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      font-size: 14px;
      line-height: 20px;
      padding: 3px 0;
      color: @whiteSmoke;
    }

    .type-category {
      padding-left: 100px;
      margin-left: 15px;
    }

    .type-category ul {
      .clearFix();
    }

    .type-category ul li {
      .fl();
    }

    .type-category ul li a {
      display: block;
      padding: 3px 12px;
      color: @baseColor;
      #transition(all .2s linear);
    }

    .type-category ul li a:hover,
    .type-category ul li.active a {
      color: @whiteColor;
      background: @activeColor;
    }
  }
}

.Driver-box {
  .item {
    margin-bottom: 5px;
    padding: 0 10px;
    background: @whiteColor;
  }

  .item h3 {
    width: 80%;
    height: 42px;
    line-height: 42px;
    font-size: 22px;
    border-bottom: 1px solid @borderColor;
    text-transform: capitalize;

    span {
      color: @activeColor;

      &:after {
        content: ">";
        padding: 0 5px;
      }

      &:nth-last-of-type(1):after {
        content: "";
        padding: 0;
      }
    }
  }

  .item .mode {
    .clearFix();
    width: 80%;
    padding: 20px 0;

    p {
      .fl();
      display: block;
      width: 16.666666%;
      padding: 5px 0;

      a {
        color: @baseColor;
        #transition(all .2s linear);
      }

      a:hover {
        color: @activeColor;
        text-decoration: underline;
      }
    }
  }

  @media screen and (min-width: 768px) and (max-width: 991px) {
    .item h3 {
      width: 100%;
      font-size: 16px;
    }

    .item .mode {
      width: 100%;

      p {
        width: 33%;
      }
    }
  }
  @media screen and (min-width: 992px) and (max-width: 1365px) {
    .item h3 {
      width: 100%;
      font-size: 18px;
    }

    .item .mode {
      width: 100%;

      p {
        width: 25%;
      }
    }
  }
  @media screen and (min-width: 1366px) and (max-width: 1800px) {
    .item h3 {
      width: 90%;
      font-size: 20px;
    }

    .item .mode {
      width: 90%;

      p {
        width: 20%;
      }
    }
  }
}

.layui-layer-setwin {
  top: 0 !important;
  right: 0 !important;

  .layui-layer-min {
    display: none !important;
  }

  .layui-layer-max {
    display: none !important;
  }

  .layui-layer-close1 {
    top: -12px !important;
    right: -12px !important;
    width: 30px !important;
    height: 30px !important;
    background: #4A4A4A !important;
    border-radius: 50% !important;
  }

  .layui-layer-close1:after {
    content: 'X';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
}

// 手机端
@media screen and (max-width: 767px) {
  .tips p {
    margin-bottom: 5px;
  }

  .filter-box {
    margin: 5px 0;

    .type {
      h3 {
        position: static;
        margin-bottom: 5px;
      }

      .type-category {
        padding: 0;
        margin: 0;
      }

      .type-category ul {
        border-left: 1px solid @borderColor;
      }

      .type-category ul li {
        .text-overflow();
        width: 50%;
        height: 35px;
        line-height: 35px;
        border-right: 1px solid @borderColor;
        border-bottom: 1px solid @borderColor;

        &:nth-of-type(1),
        &:nth-of-type(2) {
          border-top: 1px solid @borderColor;
        }
      }

      .type-category ul li a {
        margin: 0;
        padding: 0 10px;
      }
    }
  }

  .Driver-box {
    .item h3 {
      .text-overflow();
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
    }

    .item .mode {
      width: 100%;

      p {
        .text-overflow();
        width: 50%;
        padding: 8px 5px;
        border-right: 1px solid @borderColor;
        border-bottom: 1px solid @borderColor;

        &:nth-of-type(1),
        &:nth-of-type(2) {
          border-top: 1px solid @borderColor;
        }

        &:nth-of-type(2n + 1) {
          border-left: 1px solid @borderColor;
        }
      }
    }
  }
}

// 手机端结束
